<template>
  <div class="template_box">
    <!--    查询-->
    <div class="template_search">
      <div class="template_search_box">
        <div class="title">名称：</div>
        <a-input disabled v-model:value="dic_data.params.searchValue" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <div class="title">编码：</div>
        <a-input disabled v-model:value="device_type_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <a-button style="margin-right: 10px" type="primary" @click="search_data" disabled>查询</a-button>
        <a-button type="primary" @click="re_flash" disabled>重置</a-button>
      </div>
    </div>
    <!--    列表-->
    <div class="template_table">
      <div class="template_add_btn">
        <a-button style="margin-right: 0.2rem" type="primary" @click="add_data">新增</a-button>
        <a-button type="primary" @click="re_flash">刷新</a-button>
      </div>
      <a-table :pagination="false" bordered :dataSource="dic_data.data_list" :columns="columns">
        <!--        模板-->
        <template v-for="col in ['code', 'name','remark']" #[col]="{ text, record }" :key="col">
          <div>
            <a-input
                v-if="editableData[record.key]"
                v-model:value="editableData[record.key][col]"
                style="margin: -5px 0"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template #operation="{ record }">
          <a-popconfirm
              v-if="dic_data.data_list.length && !statusObject.edit_status"
              title="非开发人员请勿删除，确认删除么?"
              okText="确认"
              cancelText="取消"
              @confirm="onDelete(record.key)"
          >
            <a :style="{color:'red'}">删除</a>
          </a-popconfirm>
          <span v-if="dic_data.data_list.length">
                <span v-if="editableData[record.key]">
                  <a-popconfirm title="确认提交?"
                                okText="确认"
                                cancelText="取消"
                                @confirm="save(record.key)">
                    <a>保存</a>
                  </a-popconfirm>
                  <a-popconfirm title="确认执行取消操作?"
                                okText="确认"
                                cancelText="取消"
                                @confirm="cancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="edit(record.key)">编辑</a>
                </span>
              </span>

        </template>
      </a-table>
      <a-pagination v-if="pageObject.total>10" style="margin-top: 10px" v-model:current="pageObject.currentPage"
                    :total="pageObject.total"
                    @change="changePage"/>
    </div>
    <dic_type_add @re_flash:re_flash="re_flash"/>
  </div>
</template>

<script>
import {defineComponent, ref, reactive} from 'vue';
import {cloneDeep} from "lodash-es";
import {get_type_list, delete_dic_type,edit_dic_type} from "@/api/dic/type";
import {message} from "ant-design-vue";
import {handle_key} from "@/utils/handle_key";
import {useStore} from "vuex"
import dic_type_add from "@/views/system/dic_type/dic_type_add";

export default defineComponent({
  // name: "WorkpieceInformation";
  name: "dic_type",
  props: {},
  setup() {
    const store = useStore()
    const columns = [
      {
        title: '序号',
        dataIndex: 'typeId',
        key: 'typeId',
        slots: {
          customRender: 'typeId',
        },
      },
      {
        title: '编码',
        dataIndex: 'code',
        key: 'code',
        slots: {
          customRender: 'code',
        },
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        slots: {
          customRender: 'name',
        },
      },
      {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort',
        slots: {
          customRender: 'sort',
        },
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        slots: {
          customRender: 'status',
        },
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        slots: {
          customRender: 'remark',
        },
      },
      {
        title: '操作',
        dataIndex: 'edit',
        key: 'edit',
        slots: {
          customRender: 'operation',
        },
      },
    ];
    const pageObject = reactive({
      currentPage: 1,
      total: 10,
      pageIndex: 1
    });
    const dic_data = reactive({
      data_list: [],
      params: {
        "pageIndex": pageObject.pageIndex,
        "pageSize": 10,
        "id": 0,
        "searchValue": "",
        "searchBeginTime": "",
        "searchEndTime": "",
        "field": "",
        "order": "",
        "where": ""
      }
    });
    const edit_params = reactive({
      "typeId": 0,
      "dictValue": "",
      "dictCode": "",
      "sort": 0,
      "remark": "",
      "status": 0,
      "createTime": "",
      "updateTime": "",
      "createUserId": 0,
      "updateUserId": 0
    });
    const device_number = ref('')
    const device_type_number = ref('')
    const terminal_number = ref('')

    //获取分页数据
    const changePage = (e) => {
      // console.log(e)
      pageObject.pageIndex = e
    };
    /**
     * 获取界面数据列表
     * */
    const get_list = async () => {
      const res = await get_type_list(dic_data.params)
      console.log(res)
      if (res.code === 1) {
        dic_data.data_list = handle_key(res.data.items)
        pageObject.total = res.data.totalItems
      }
    }
    /**
     * 编辑
     *
     * */
    const editableData = reactive({});

    //列表删除确认
    const onDelete = async key => {
      let params = {
        "parm": dic_data.data_list[key].typeId
      }
      try {
        const res = await delete_dic_type(params)
        if (res.code === 1) {
          message.success("删除成功")
          dic_data.data_list = dic_data.data_list.filter(item => item.key !== key);
          return
        }
        message.warning(res.message)
      } catch (e) {
        message.warning("请求异常")
      }

    };
    /**
     * 编辑状态
     *
     * */
    const statusObject = reactive({
      edit_status: false
    });

    /**
     * 编辑
     * */
    const edit = key => {
      editableData[key] = cloneDeep(dic_data.data_list.filter(item => key === item.key)[0]);
      statusObject.edit_status = true
    };

    const save = async key => {
      /*
      * 修改之后的参数
      * */
      edit_params.typeId = editableData[key].typeId
      edit_params.name = editableData[key].name
      edit_params.code = editableData[key].code
      edit_params.sort = editableData[key].sort
      edit_params.remark = editableData[key].remark
      edit_params.status = editableData[key].status
      const res = await edit_dic_type(edit_params)
      statusObject.edit_status = false
      delete editableData[key];
      if (res.code === 1) {


        message.success("修改成功")
        re_flash()
        return
      }
      message.warning(res.message)


    };

    const cancel = key => {
      delete editableData[key];
      statusObject.edit_status = false
    };

    get_list()
    /**
     * 刷新
     * */
    const re_flash = () => {
      dic_data.params.searchValue = null;
      get_list()
    }
    /**
     * 搜索
     * */
    const search_data = () => {
      get_list()
    }
    /**
     * 新增
     * */
    const add_data = () => {
      store.commit("SET_ADD_ROLE", true)
    }
    return {
      device_number,
      device_type_number,
      terminal_number,
      dic_data,
      columns,
      pageObject,
      editableData,
      statusObject,
      onDelete,
      changePage,
      save,
      cancel,
      edit,
      re_flash,
      search_data,
      add_data
    };
  },
  components: {
    dic_type_add
  }
});

</script>

<style scoped lang="scss">
.template_box {
  display: flex;
  flex-direction: column;
  font-size: 0.5rem;

  .template_search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    .template_search_box {
      display: flex;
      flex-direction: row;
      width: 25%;
      justify-content: center;

      .title {
        width: 8rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .template_table {
    .template_add_btn {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>
